<template>
  <div v-if="props.itemInfo.formTemplateFieldVOList?.length">
    <el-row class="contract_base_title mt20"> {{ props.itemInfo.title }}</el-row>
    <div class="contTable">
      <el-table
        border
        :data="props.list"
        :columns="props.itemInfo.formTemplateFieldVOList"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
      >
        <el-table-column :label="t('keys.serial_no')" type="index" align="center" min-width="60px" width="60px" v-if="SerialNumber"></el-table-column>
        <template v-for="(item, index) in props.itemInfo.formTemplateFieldVOList" :key="index">
          <el-table-column
            :prop="item.fieldCode"
            :label="item.fieldName"
            :data-index="index"
            min-width="200px"
            show-overflow-tooltip
            v-if="item.visableDetailFlag && item.status && item.displayPage.includes('PREVIEW_PAGE')"
          >
            <template #default="{row}">
              <!-- 预制字段 -->
              <template v-if="item.presetFlag">
                <template v-if="item.fieldTypeCode === 'FILE_UPLOAD' && row[item.fieldCode]">
                  <!-- 组件/模版的兼容---行信息 -->
                  <template v-if="row[item.fieldCode] && row[item.fieldCode + 'List']">
                    <zcb-upload
                      v-if="row[item.fieldCode] && row[item.fieldCode + 'List']?.length"
                      :fieldSceneVo="{
                        fieldTypeCode: item.fieldTypeCode
                      }"
                      :value="row[item.fieldCode + 'List']"
                      upType="table"
                      :isExhibition="true"
                      :isDownload="true"
                      :isTableUpload="true"
                      :isShowBtn="false"
                    >
                    </zcb-upload>
                    <template v-else>--</template>
                  </template>
                  <template v-else v-for="(v, i) in fileList[item.fieldCode]" :key="i">
                    <el-link v-if="v[item.fieldCode]" :href="v[item.fieldCode]" type="primary" target="_blank">{{
                      item.fieldCode + 'List' == 'attachmentUrlList' && row[item.fieldCode + 'List'].length > 0
                        ? row[item.fieldCode + 'List'][0].fileName
                        : v[item.fieldCode]
                        ? v[item.fieldCode]
                        : '--'
                    }}</el-link>
                    <span v-else>--</span>
                  </template>
                </template>
                <template v-else-if="item.fieldCode === 'taxRate' && row[item.fieldCode]">
                  <div>{{ row[item.fieldCode + 'Cn'] }} %</div>
                </template>
                <template v-else>
                  {{ row[item.fieldCode] && item.fieldTypeCode === 'CURRENCY' ? '￥' : '' }}
                  {{
                    row[item.fieldCode] && row[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                      ? row[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                      : row[item.fieldCode] && !isPlainObject(row[item.fieldCode]) && row[item.fieldCode] !== 0
                      ? row[item.fieldCode]
                      : !isPlainObject(row[item.fieldCode]) && row[item.fieldCode] === 0
                      ? row[item.fieldCode]
                      : '--'
                  }}
                  {{ (row[item.fieldCode] || row[item.fieldCode] == 0) && item.fieldTypeCode == 'PERCENT' && item.fieldCode != 'taxRate' ? '%' : '' }}
                </template>
              </template>
              <!-- 自定义字段 -->
              <template v-else>
                <template v-if="item.fieldTypeCode === 'FILE_UPLOAD' && row.extendMap[item.fieldCode]?.name">
                  <div>
                    {{ getFileDirs(item.fieldCode, row.extendMap[item.fieldCode]?.name) }}
                  </div>
                  <template v-for="(v, i) in fileList[item.fieldCode]" :key="i">
                    <el-link
                      :href="v[item.fieldCode].url + (v[item.fieldCode].url.indexOf('?') != -1 ? '&' : '?') + 'access_token=' + getAccessToken()"
                      type="primary"
                      target="_blank"
                      >{{ v[item.fieldCode].object || '--' }}</el-link
                    >
                  </template>
                </template>
                <template v-else>
                  {{ row[item.fieldCode] && item.fieldTypeCode === 'CURRENCY' ? '￥' : '' }}{{ row.extendMap[item.fieldCode]?.name || '--' }}
                  {{ item.fieldTypeCode == 'PERCENT' && item.fieldCode != 'taxRate' ? '%' : '' }}
                </template>
              </template>
              <!-- {{ row[item.fieldCode] }} -->
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { getFileguidApi } from 'api/common'
import { ERR_OK } from 'config/statusCode'
import { getAccessToken } from 'utils/headerToken'
import { useI18n } from 'vue-i18n'
import { dateUtil } from 'utils/dateUtil'

const { t } = useI18n() // 中英文
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  itemInfo: {
    type: Object,
    default: () => {}
  }
})

console.log(props.list, '业务单据返回的行数据')
console.log(props.itemInfo.title, props.itemInfo.formTemplateFieldVOList, '模版返回的数据')
const dateList = ref([])
if (props.itemInfo.formTemplateFieldVOList?.length) {
  props.itemInfo.formTemplateFieldVOList.forEach((item) => {
    if (item.fieldTypeCode == 'DATE') {
      dateList.value.push(item.fieldCode)
    }
  })
  dateList.value.forEach((key) => {
    props.list.forEach((sub) => {
      sub[key] = sub[key] ? dateUtil(sub[key]).format('YYYY-MM-DD') : ''
    })
  })
}

const SerialNumber = ref(true)
if (props.list.length > 0) {
  SerialNumber.value = !props.list[0].hasOwnProperty('children')
}

const isPlainObject = (val) => {
  return val instanceof Object
}
const json = ref({})
const getFileDirs = (key, dir) => {
  json.value = { key: key, dir: dir }
}
const fileList = ref({})
const getFileDir = async ({ key, dir }) => {
  fileList.value[key] = []
  for (let i = 0; i < fileList.value[key]?.length; i++) {
    if (fileList.value[key][i].hasOwnProperty(key)) {
      return
    }
  }
  // 根据目录名dir 获取文件列表
  const { code, data } = await getFileguidApi([dir])
  if (code === ERR_OK) {
    // fileList.value[key].push({ [key]: data.url})
    data.map((item) => {
      fileList.value[key].push({ [key]: item.url })
    })
  }
}
setTimeout(() => {
  nextTick(() => {
    if (JSON.stringify(json.value) != '{}') {
      getFileDir(json.value)
    }
  })
})
</script>

<style lang="scss" scoped>
.contTable {
  width: 99%;
}
.mt20 {
  margin-top: 20px;
}
</style>
